<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar @handleSearch="init"
                :isShowDate="false"
                placeHolder="请输入运营商名称" />
    <!-- 数据展示 -->
    <table-data :tableData="tableData.list"
                   :tableLabel="tableLabel"
                   :page.sync="page"
                   :pageSize.sync="pageSize"
                   :pageCount="tableData.rows"
                   v-loading="loading"
                   @handleSubsidies="handleSubsidies"
                   @handleSupplierList="handleShowGys" />
    <!-- 弹框 -->
    <v-dialog :show.sync="isShowDialog"
              width="30%">
      <!--<template v-if="key == 3">-->
        <!--<p>-->
          <!--<el-radio v-model="currentActive"-->
                    <!--label="1"-->
                    <!--border-->
                    <!--style="flot:left;">供应</el-radio>-->
          <!--<el-radio v-model="currentActive"-->
                    <!--label="2"-->
                    <!--border-->
                    <!--style="flot:left;">不供应</el-radio>-->
        <!--</p>-->
        <!--<el-button type="primary"-->
                   <!--style="float:right;"-->
                   <!--@click="mdfdialogData">修改</el-button>-->
      <!--</template>-->
      <template v-if="key == 2 || key ==1">
        <el-input v-model="currentNum"
                  style="width:75%; margin-right:6%;"
                  :placeholder="placeHolderContent">
          <template slot="append">
            {{unit}}
          </template>
        </el-input>
        <el-button type="primary"
                   @click="mdfdialogData">修改</el-button>
      </template>
    </v-dialog>

    <!-- 设置供应商运营商列表列表弹框 -->
    <!--<el-dialog title="设置供应商"-->
               <!--center-->
               <!--:visible.sync="isShowSupplierList"-->
               <!--v-el-drag-dialog>-->
      <!--<template>-->
        <!--<div style="margin-bottom:20px;overflow:hidden;">-->
          <!--<el-input v-model="supplierSearchKey"-->
                    <!--size="small"-->
                    <!--style="width:30%;float:left;"></el-input>-->
          <!--<div class="block"-->
               <!--style="margin:0 10px;float:left;">-->
            <!--<el-date-picker size="small"-->
                            <!--v-model="supplierActiveDate"-->
                            <!--type="datetimerange"-->
                            <!--range-separator="至"-->
                            <!--start-placeholder="开始日期"-->
                            <!--end-placeholder="结束日期"-->
                            <!--value-format="yyyy-MM-dd">-->
            <!--</el-date-picker>-->
          <!--</div>-->
          <!--<el-button type="primary"-->
                     <!--size="small"-->
                     <!--@click="supplierList()">搜索</el-button>-->
        <!--</div>-->
        <!--<table-data-el height="20vh"-->
                       <!--:border="true"-->
                       <!--:tableData="supplierListData.list"-->
                       <!--:page.sync="supplierPage"-->
                       <!--:pageSize.sync="supplierPageSize"-->
                       <!--:pageSizes="[4,6,8]"-->
                       <!--:pageCount="supplierListData.rows"-->
                       <!--:tableLabel="supplierListLabel"-->
                       <!--@handleCheckReferee="checkReferee"-->
                       <!--@showGys="handleShowGys"-->
                       <!--@handleRegion="checkRegion" />-->
        <!--&lt;!&ndash; 查看推荐人弹框 &ndash;&gt;-->
      <!--</template>-->
      <!--<el-dialog title="推荐人详情"-->
                 <!--center-->
                 <!--width="30%"-->
                 <!--:visible.sync="isShowReferee"-->
                 <!--append-to-body-->
                 <!--v-el-drag-dialog>-->
        <!--<template>-->
          <!--<table-data-el :isShowPagination="false"-->
                         <!--height="0vh"-->
                         <!--:border="true"-->
                         <!--:tableData="refereeData"-->
                         <!--:tableLabel="[{label: '推荐人身份',prop: 'share_type'},{label: '推荐人名称',prop: 'share_name'},{label: '推荐码',prop: 'share_promo_code'}]" />-->
        <!--</template>-->
      <!--</el-dialog>-->


        <!--&lt;!&ndash; 设置供应商&ndash;&gt;-->

      <!--&lt;!&ndash;<el-dialog title="区域详情"&ndash;&gt;-->
                 <!--&lt;!&ndash;center&ndash;&gt;-->
                 <!--&lt;!&ndash;width="30%"&ndash;&gt;-->
                 <!--&lt;!&ndash;:visible.sync="isShowRegion"&ndash;&gt;-->
                 <!--&lt;!&ndash;append-to-body&ndash;&gt;-->
                 <!--&lt;!&ndash;v-el-drag-dialog>&ndash;&gt;-->
        <!--&lt;!&ndash;<template>&ndash;&gt;-->
          <!--&lt;!&ndash;<table-data-el height="0vh"&ndash;&gt;-->
                         <!--&lt;!&ndash;:tableData="regionData"&ndash;&gt;-->
                         <!--&lt;!&ndash;:tableLabel="regionLabel"&ndash;&gt;-->
                         <!--&lt;!&ndash;:isShowPagination="false"&ndash;&gt;-->
                         <!--&lt;!&ndash;:border="true" />&ndash;&gt;-->
        <!--&lt;!&ndash;</template>&ndash;&gt;-->
      <!--&lt;!&ndash;</el-dialog>&ndash;&gt;-->
    <!--</el-dialog>-->
    <!-- 设置供应商弹框 -->
    <el-dialog title="设置供应商"
               center
               width="25%"
               :visible.sync="isShowGysDialog"
               v-el-drag-dialog
               @close="supplierValue = ''">
      <template>
        <el-select v-model="supplierValue"
                   placeholder="请选择供应商"
                   size="medium"
                   style="margin-right:8%;">
          <el-option v-for="(item, index) in gysData"
                     :key="index"
                     :value="item.id"
                     :label="item.name" />
        </el-select>
        <el-button size="medium"
                   type="primary"
                   :disabled="isDisabled"
                   @click="confirmSetSupplier">确定</el-button>
        <el-button size="medium"
                   type="danger"
                   @click="isShowGysDialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>

  import tableData from '@/views/Setup/common/table'

  export default {
  name: "settingAlone",
  data () {
    return {
      tableData: [], //单独设置数据
      tableLabel: [ //单独设置数据对应的标题
        {
          label: '运营商名称',
          prop: 'company'
        },
        {
          label: '负责人',
          prop: 'leader'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '售卡分佣（%）',
          prop: 'profit',
          detail: true,
          key: 1,
          methodName: 'handleSubsidies',
        },
        {
          label: '延迟罚款',
          prop: 'delay_fine',
          detail: true,
          key: 2,
          methodName: 'handleSubsidies',
        },
        // {
        //   label: '滤芯补助',
        //   prop: 'core_type',
        //   detail: true,
        //   methodName: 'handleSubsidies',
        //   key: 3,
        //   btnText: '详情'
        // },
        {
          label: '设置供应商',
          detail: true,
          btnText: '设置',
          methodName: 'handleSupplierList'
        }
      ],
      page: 1, //单独设置当前页
      pageSize: 8, //每页显示多少条数据
      searchkey: '', //搜索关键字
      activeDate: ['', ''], //选中的日期
      key: '', //区分弹框的显示内容
      isShowDialog: false, //弹框默认隐藏
      currentActive: '', //单选框默认选项
      oldActive: '', // 单选就选项
      activeData: {}, // 当前数据
      currentNum: '', //当前弹框的值
      oldNum: '', //弹框旧值
      loading: false,
      placeHolderContent: '',
      isShowSupplierList: false, //设置供应商运营商列表数据显示隐藏
      supplierListData: [], //设置供应商运营商列表数据
      supplierListLabel: [
        {
          label: '运营商名称',
          prop: 'company'
        },
        {
          label: '负责人',
          prop: 'leader'
        },
        {
          label: '联系电话',
          prop: 'phone'
        },
        {
          label: '区域个数',
          prop: 'regions',
          detail: true,
          methodName: 'handleRegion'
        },
        {
          label: '设置供应商',
          detail: true,
          btnText: '设置',
          methodName: 'showGys'
        },
        {
          label: '推荐人',
          detail: true,
          btnText: '查看',
          methodName: 'handleCheckReferee'
        }
      ], //设置供应商运营商列表数据标题
      isShowReferee: false, //t推荐人弹框显示隐藏
      supplierPage: 1, //设置供应商运营商列表数据当前页
      supplierPageSize: '4', //设置供应商运营商列表数据条数/页
      supplierSearchKey: '',//设置供应商运营商列表数据的搜索文本
      supplierActiveDate: ['', ''],//设置供应商运营商列表数据的选择日期
      refereeData: [],
      isShowGysDialog: false,//供应商弹框
      gysData: [], //供应商列表
      isDisabled: false, //供应商是否可选
      supplierValue: '', //选中的供应商ID
      aid: '', // 运营商ID
      isShowRegion: false, //区域弹框显示隐藏
      regionData: [], //区域详情弹框数据
      regionLabel: [ //区域详情弹框数据标题
        {
          label: '省',
          prop: 'province'
        },
        {
          label: '市',
          prop: 'city'
        },
        {
          label: '区',
          prop: 'county'
        }
      ]
    }
  },
  components: {
    tableData
  },
  methods: {
    async init (searchkey = '') { //页面初始化渲染数据
      this.loading = true;
      let valueStr = Object.assign(searchkey,{page: this.page,pageSize: this.pageSize});
      let res = await this.api.operatorSettingAlone(valueStr);
      this.tableData = res.data;
      this.loading = false;
    },
    handleSubsidies (key, value) { //弹框内容展示
      this.activeData = value;
      if (key === 3) {
        this.currentActive = value['core_type'].toString();
        this.oldActive = value['core_type'].toString();
        this.key = key;
      } else if (key === 2 || key === 1) {
        if (key === 2) {
          this.placeHolderContent = '请输入延迟罚款';
          this.unit = "￥";
          this.currentNum = value['delay_fine'];
          this.oldNum = value['delay_fine'];
          this.key = 2;
        } else if (key === 1) {
          this.placeHolderContent = '请输入售卡分佣';
          this.unit = "%";
          this.currentNum = value['profit'];
          this.oldNum = value['profit'];
          this.key = 1;
        }
      }
      this.isShowDialog = true;
    },
    async mdfdialogData () { //修改弹框数据
      let res;
      if (this.key === 3) {
        if (this.oldActive === this.currentActive) return false;
        res = await this.api.setIsSubsidies({ aid: this.activeData.aid, type: this.currentActive })
      } else if (this.key === 2 || this.key === 1) {
        if (this.oldNum === this.currentNum) return false;
        if (this.key === 2) {
          res = await this.api.setDelayMoney({ aid: this.activeData.aid, money: this.currentNum })
        } else if (this.key === 1) {
          res = await this.api.setFdhs({ aid: this.activeData.aid, money: this.currentNum })
        }
      }
      this.$message({
        message: res.msg,
        type: res.code === 1 ? 'success' : 'error',
        duration: 1000
      });
      this.isShowDialog = false;
      this.init();
    },
    // async supplierList () { //设置供应商运营商列表数据
    //   if (this.supplierActiveDate === null || this.supplierActiveDate === undefined) this.supplierActiveDate = ['', ''];
    //   let argumentsStr = {
    //     page: this.supplierPage,
    //     pageSize: this.supplierPageSize,
    //     search: this.supplierSearchKey,
    //     start_time: this.supplierActiveDate[0],
    //     end_time: this.supplierActiveDate[1]
    //   };
    //   let res = await this.api.yysSupplistList(argumentsStr);
    //   this.supplierListData = res.data;
    //   this.isShowSupplierList = true;
    //
    // },
    // async checkReferee (...value) { //查看推荐人
    //   this.refereeData = [];
    //   let res = await this.api.checkReferee({share_promo_code: value[1]['share_promo_code']});
    //   this.refereeData.push(res.data);
    //   this.isShowReferee = true;
    //   console.log(this.refereeData)
    // },
    async handleShowGys (...value) {
      // this.isDisabled = false;
      this.aid = value[1]['aid'];
      let res = await this.api.yysGys({aid: value[1].aid});
      this.gysData = res.data;
      this.gysData.filter((item) => {
        if (item.mo) {
          this.supplierValue = item.id;
          // this.isDisabled = true;
        }
      });
      this.isShowGysDialog = true;
    },
    async confirmSetSupplier () { //设置供应商
      let res = await this.api.yysSetGys({sm_id: this.supplierValue, aid: this.aid});
      this.$message({
        type: res.code === 1 ? 'success' : "error",
        message: res.msg
      });
      this.isShowGysDialog = false;
    }
    // ,
    // handleSearch (...value) {
    //   this.init(value[0], value[1])
    // },
    // async checkRegion (...value) {
    //   console.log(value[1].aid);
    //   let res = await this.api.checkRegion({aid: value[1].aid});
    //   console.log(res.data);
    //   this.regionData = res.data.list;
    //   this.isShowRegion = true;
    // }

  },
  watch: {
    page () {
      this.init()
    },
    pageSize () {
      this.init()
    },
    supplierPage () {
      this.supplierList()
    },
    supplierPageSize () {
      this.supplierList()
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
</style>
